{% extends "bootstrap/base.html" %}
{% block title %}Flask-Serial example{% endblock %}

{% block styles %}
{{ super() }}
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    var socket = io.connect('http://' + document.domain + ':' + location.port);

    $('#send').click(function(event) {
      var message = $('#message').val();
      var data = '{' + '"message": "' + message + '"}';
      socket.emit('send', data=data);
    });

    socket.on('serial_message', function(data) {
      console.log(data);
      var text = data['message'];
      var $textarea = $('#serial_message');
      $textarea.val($textarea.val() + text + '\n');
    })
  });
</script>
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <h1>Flask-Serial Example</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Send Serial Message</h3>
        </div>
        <div class="panel-body">
          <div class="col-xs-12">
            <div class="row">
              <div class="form-horizontal">
                <div class="form-group">
                  <label class="control-label col-xs-4">Message: </label>
                  <div class="col-xs-8">
                    <input id="message" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-xs-8 col-xs-offset-4">
                    <button id="send" class="btn btn-primary">Send</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Receive Serial Messages</h3>
        </div>
        <div class="panel-body">
          <div class="col-xs-12">
            <div class="row">
              <div class="form-horizontal">
                <div class="form-group">
                  <label class="control-label col-xs-4">Messages:</label>
                  <div class="col-xs-8">
                    <textarea id="serial_message" class="form-control" rows=10></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
